import React from 'react';
import { Select } from 'antd';
import './index.less';

const ChartsOptions: React.FC<IChartsOptionsProps> = (props) => {
  const changeChartsOptions = (val: string, index: number) => {
    props.changeChartsOptions && props.changeChartsOptions(val, index);
  };

  return (
    <div className="charts-options">
      {props.listVal.map((v: string, i) => {
        return (
          <Select
            style={{ width: 160 }}
            value={v}
            options={
              i === 0 ? props.filterOptions.first : props.filterOptions[props.listVal[i - 1]]
            }
            onChange={(val) => changeChartsOptions(val, i)}
          />
        );
      })}
    </div>
  );
};

interface IChartsOptionsProps {
  filterOptions: Record<string, any>;
  listVal: string[];
  changeChartsOptions?: (val: string, index: number) => void;
}

export default ChartsOptions;
